<template>
    <input type="text" class="new-todo-input" placeholder="在此输入待办事项   回车 - 保存 ESC - 取消" 
            v-model="newTodo" 
            v-on:keyup.enter="addNewTodo" 
            @keyup.esc="newTodo=''">
</template>

<script>
export default {
    name: 'new-todo' ,
    data(){
        return {
            newTodo: '',
        }
    },
    methods: {
        addNewTodo(){
            if(this.newTodo.trim()==""){
                this.newTodo = ''
                return
            }
            this.$emit('addNewTodo',this.newTodo)
            this.newTodo = ""
        }
    }  
}
</script>

<style scoped>
.new-todo-input{
    padding: 10px 18px;
    font-size: 18px;
    width: 100%;
    margin-bottom: 16px;
}
</style>


